import { useAxiosWebGet } from "@sker/sdk"
import { Select, Space } from "antd"
import { useEffect, useState } from "react"

export const useCityList = () => {
    const { fetch: fetchAddressList } = useAxiosWebGet('imeepos/tmap/list')
    const [list, setList] = useState<any[]>()
    const [options, setOptions] = useState<any[]>()
    const [data, setData] = useState<any>()
    useEffect(() => {
        fetchAddressList().then(res => {
            if (res.success) {
                const list = res.data.flat();
                setList(list)
                setOptions(list.map((it: any) => ({ label: it.name, value: it.id })))
                const data = {}
                list.map((it: any) => {
                    Reflect.set(data, it.id, it.name)
                })
                setData(data)
            }
        })
    }, [])
    return {
        data: data,
        list: list,
        options
    }
}
export const ProvinceSelector: React.FC<{ value?: string, onChange?: (val: string) => void, name?: string }> = ({ value, onChange, name }) => {
    const { options: addressList } = useCityList()
    const [provinceList, setProvinceList] = useState<any[]>([])
    const [province, setProvince] = useState<string>(value)
    useEffect(() => {
        if (addressList) {
            setProvinceList(addressList.filter((it: any) => (it.value as string).endsWith('0000')))
        }
    }, [addressList])
    return <Select value={province} onChange={e => {
        setProvince(e)
        onChange && onChange(e)
    }} placeholder={'选择省份'} className="w-100px" style={{ minWidth: '100px' }} options={provinceList} />
}
export const CitySelector: React.FC<{ value?: string, onChange?: (val: string) => void, name?: string }> = ({ value, onChange, name }) => {
    const { options: addressList } = useCityList()
    const [provinceList, setProvinceList] = useState<any[]>([])
    const [cityList, setCityList] = useState<any[]>([])
    const getProvince = () => {
        if (value) return `${value.slice(0,2)}0000`
        return undefined;
    }
    const getCity = () => {
        if (value) return value
        return undefined;
    }
    const [province, setProvince] = useState<any>(getProvince())
    const [city, setCity] = useState<any>(getCity())
    useEffect(() => {
        if (addressList) {
            setProvinceList(addressList.filter((it: any) => (it.value as string).endsWith('0000')))
        }
    }, [addressList])
    useEffect(() => {
        if (!province) return;
        setCityList(addressList.filter((it: any) => {
            const key = it.value as string;
            return key.startsWith(`${province.slice(0, 2)}`) && key.endsWith('00')
        }))
    }, [province])
    return <Space>
        <Select value={province} onChange={e => setProvince(e)} placeholder={'选择省份'} className="w-100px" style={{ minWidth: '100px' }} options={provinceList} />
        {province && <Select value={city} onChange={e => {
            setCity(e)
            onChange && onChange(e)
        }} placeholder={'选择市'} className="w-100px" style={{ minWidth: '100px' }} options={cityList} />}
    </Space>
}
